<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>list</title>
</head>
<script src="https://unpkg.com/vue@3"></script>
<body>

    

    <div id="app">

        <div>
            <!-- <input type="text" :value="name">
            <input type="text" :value="author"> -->

            <!-- 双向绑定 v-model-->
            <input type="text" v-model="name">
            <input type="text" v-model="author">
            <button @click="addBook">添加</button>
        </div>
        
        <ul>
            <!-- <li v-for="book in bookList"> -->

                <!--使用v-for,一定要搭配:key来使用  -->
            <li v-for="book in bookList" :key="book.id">
                <input type="checkbox" name="" id="">
                书籍名是{{book.name}}  作者是{{book.author}}
            </li>
        </ul>
       
    </div>
    <script>
        const {createApp} = Vue;
        createApp({
            data:function(){
                return{
                    msg:"hello",
                    bookList:[
                        {id:0,name:"thinking in java4",author:"unknown4"},
                        {id:1,name:"thinking in java",author:"unknown"},
                        {id:2,name:"thinking in java1",author:"unknown"},
                        {id:3,name:"thinking in java2",author:"unknown"},
                ],
                    name:'输入书名',
                    author:'输入作者'
                }
            },
            methods: {
                addBook(){
                    this.bookList.unshift({id:this.bookList.length+1,name:this.name,author:this.author});
                    this.name='';
                    this.author='';

                }
            }
        }).mount("#app");
    </script>
</body>
</html>